<template>
  <div class="search-box">
    <form action="/">
      <van-search
        v-model="searchData"
        placeholder="请输入群名称关键词"
        show-action
        @search="onSearch"
        @cancel="onCancel"
      />
    </form>

    <van-button class="filter-btn" @click="onClickFilterBtn">地区/日期筛选</van-button>

    <!-- 筛选条件-container -->
    <van-popup v-model="popShow" position="right" class="popup-filter">
      <van-nav-bar
        title="地区/日期筛选"
        left-text="取消"
        @click-left="onClickLeft"
        calss="popup-filter-nav"
      />
      <van-cell-group>
        <van-cell :title="form.addressTxt" is-link @click="chooseAddress"/>
        <van-cell :title="form.startTimeTxt" is-link @click="chooseStartDate" />
        <van-cell :title="form.endTimeTxt" is-link @click="chooseEndDate" />
      </van-cell-group>
      <van-button type="default" class="btn-bottom" @click="onClickSearch">搜索</van-button>
    </van-popup>

    <!-- 筛选条件-地区 -->
    <van-popup v-model="popAddressShow" position="bottom">
      <van-area
        :value="addressData"
        :area-list="areaList"
        @confirm="listAddressConfirm"
        @cancel="chooseAddress"
      />
    </van-popup>
    <!-- 筛选条件-开始时间 -->
    <van-popup v-model="popStartTimeShow" position="bottom">
      <van-datetime-picker
        v-model="currentDate"
        type="date"
        @confirm="listStartTimeConfirm"
        @cancel="chooseStartDate"
      />
    </van-popup>
    <!-- 筛选条件-结束时间 -->
    <van-popup v-model="popEndTimeShow" position="bottom">
      <van-datetime-picker
        v-model="currentDate"
        type="date"
        @confirm="listEndTimeConfirm"
        @cancel="chooseEndDate"
      />
    </van-popup>
  </div>
</template>

<script>
  import {
    NavBar,
    Cell,
    CellGroup,
    Field,
    Button,
    Row,
    Col,
    Search,
    Tabbar,
    TabbarItem,
    List,
    Icon,
    Popup,
    Dialog,
    Picker,
    Area,
    DatetimePicker
  } from 'vant';
  // 地区数据
  import jsonAddress from '@/components/common/address';
  export default {
    components: {
      [NavBar.name]: NavBar,
      [Cell.name]: Cell,
      [CellGroup.name]: CellGroup,
      [Field.name]: Field,
      [Button.name]: Button,
      [Row.name]: Row,
      [Col.name]: Col,
      [Search.name]: Search,
      [Tabbar.name]: Tabbar,
      [TabbarItem.name]: TabbarItem,
      [List.name]: List,
      [Icon.name]: Icon,
      [Popup.name]: Popup,
      [Dialog.name]: Dialog,
      [Picker.name]: Picker,
      [Area.name]: Area,
      [DatetimePicker.name]: DatetimePicker,
    },
    data() {
      return {
        popShow: false,
        popAddressShow: false,
        popStartTimeShow: false,
        popEndTimeShow: false,
        currentDate: new Date(),
        searchData: '',
        areaList: jsonAddress,
        addressData: '310104',
        form: {
          addressTxt: '选择地区',
          startTimeTxt: '选择开始日期',
          endTimeTxt: '选择结束日期'
        }
      }
    },
    mounted() {
      //获取首页搜索传过来的值
      this.searchData = this.$route.params.searchData
    },
    methods: {
      onSearch() {

      },
      onCancel() {
        // 跳转到首页
        this.$router.push('/index');
      },
      onClickLeft() {
        this.popShow = false;
      },
      onClickFilterBtn() {
        this.popShow = true;
      },
      chooseAddress() {
        // 选择地址
        this.popAddressShow = !this.popAddressShow;
      },
      listAddressConfirm(data) {
        let txt = '';
        this.popAddressShow = !this.popAddressShow;
        // 选择省市区的编号
        data.map((item, index) => {
          txt += item.name + ' ';
        })
        this.form.addressTxt = txt;
      },
      chooseStartDate() {
        // 选择开始日期
        this.popStartTimeShow = !this.popStartTimeShow;
      },
      listStartTimeConfirm(date) {
        let chooseDate = this.formatDate(date, 'yyyy/MM/dd');
        this.popStartTimeShow = !this.popStartTimeShow;
        // 选择开始时间
        this.form.startTimeTxt = chooseDate;
      },
      chooseEndDate() {
        // 选择结束日期
        this.popEndTimeShow = !this.popEndTimeShow;
      },
      listEndTimeConfirm(date) {
        let chooseDate = this.formatDate(date, 'yyyy/MM/dd');
        this.popEndTimeShow = !this.popEndTimeShow;
        // 选择结束时间
        this.form.endTimeTxt = chooseDate;
      },
      onClickSearch() {
        // 点击搜索按钮
        console.log(this.form);
      },
      // 时间戳转换
      formatDate (date, fmt) {
        if (/(y+)/.test(fmt)) {
        fmt = fmt.replace(RegExp.$1, (date.getFullYear() + '').substr(4 - RegExp.$1.length));
        }
        let o = {
        'M+': date.getMonth() + 1,
        'd+': date.getDate(),
        'h+': date.getHours(),
        'm+': date.getMinutes(),
        's+': date.getSeconds()
        };
        for (let k in o) {
        if (new RegExp(`(${k})`).test(fmt)) {
        let str = o[k] + '';
        fmt = fmt.replace(RegExp.$1, (RegExp.$1.length === 1) ? str : this.padLeftZero(str));
        }
        }
        return fmt;
      },
      padLeftZero (str) {
        return ('00' + str).substr(str.length);
      }
    }
  }
</script>

<style scoped="scoped">
.filter-btn {
  float: right;
  margin: 20px;
}
.popup-filter {
  width: 100%;
  height: 100%;
}
.popup-filter-nav {
  width: 100%;
}
.btn-bottom {
  position: absolute;
  bottom: 0;
  width: 100%;
  background-color: #101010;
  color: #fff;
}
</style>